<template>
	<view class="center_body">
		<view class="account_balance" v-if="voucherData.user.recharge_state">
			<view class="money">
				<image :src="Url+'add_images/money.png'"></image>
				账户余额
			</view>
			<view class="account_money">{{voucherData.user.balance}}</view>
		</view>
		<view class="choose_item" v-if="voucherData.user.recharge_state">
			<view class="item " :class="currentChooseIndex == index && index != 5 ? 'item_current' : ''" v-for="(item,index) in voucherData.recharge" :key="index" @tap="chooseItem(index)">
				<view>
					<view>充值{{item.price}}元</view>
					<!-- <view class="remove" v-if="currentChooseIndex == index">
						<image :src="Url+'mine/index/true.png'" mode=""></image>
					</view> -->
					<view class="item_give">赠送{{item.give_price}}元</view>
				</view>
				
				<view class="recommend" v-if="item.tj">推荐</view>
			</view>
			<view :class="[evenflag ? 'even_lastitem' : 'item']"  @tap="chooseItem(66)">
				<view v-if="currentChooseIndex == '66'">
					<input  type="number" v-model="payprice" focus/>
				</view>
				<view v-else>请输入充值金额</view>
			</view>
		</view>
		<view class="recharge_btn" @tap="toRecharge" v-if="voucherData.user.recharge_state">立即充值</view>
		<view class="recharge_explain" v-if="voucherData.user.recharge_state">
			<view class="explain_title">充值说明</view>
			<view class="explain_item">
				<text>1. 账户充值仅限微信在线支付，充值金额实时到账； </text>
				<text>2. 账户充值套餐赠送的金额即时到账；</text>
				<text>3. 账户余额有效期：自充值日起至用完为止。</text>
			</view>
		</view>
		<view v-if="!voucherData.user.recharge_state">该功能正在开发中...敬请期待！</view>
		<shop-loading v-if="shopLoad"></shop-loading>
		<sc-home></sc-home>
	</view>
</template>

<script>
	import {
		recharge,rechargeDo
	} from '@/common/mine.js';
	import {payDo} from '@/common/index.js';
	import {debounce} from '@/static/js/utils.js';
	export default {
		data() {
			return {
				Url: this.Imgurl,
				currentChooseIndex: -1,
				shopLoad:true,
				voucherData: {},
				payprice:'',
				evenflag:'false'
			}
		},
		onLoad() {
			this.shopLoad = true;
			this.getData()
		},
		onShow() {
			if(uni.getStorageSync('mineRefresh')){
				this.getData()
			}
		},
		methods: {
			chooseItem(key) {
				this.currentChooseIndex = key
				if(key == 66){
					this.payprice = ''
				}else{
					this.payprice = this.voucherData.recharge[key].price
				}
			},
			getData() {
				recharge().then(res => {
					console.log(res)
					if (res.code == 1) {
						this.voucherData = res.msg
						if( (this.voucherData.recharge.length)%2 == 1){
							this.evenflag = false
						}else{
							this.evenflag = true
						}
						this.shopLoad = false;
					} else {
						this.shopLoad = false;
						this.toast(res.msg)
					}
				}).catch()
			},
			toRecharge:debounce(function(){
				console.log(this.payprice)
				let version = 1
				if (uni.getSystemInfoSync().version) {
					version = 1
				} else {
					version = 2
				}
				if (this.payprice) {
					rechargeDo({ price: this.payprice, version: version }).then(res => {
						if(res.code == 1){
							if(!uni.getSystemInfoSync().version){
								this.h5pay(res.msg)
							}else{
								this.wechatPay(res.msg)
							}
						}else{
							this.toast(res.msg)
						}
						console.log(res)
						
					}).catch()
				} else {
					this.toast("请选择充值金额")
				}
			},500),
			wechatPay(params){
				this.loading = true;
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: params.timeStamp,
				    nonceStr: params.nonceStr,
				    package: params.package,
				    signType: params.signType,
				    paySign: params.paySign,
				    success:  (res)=> {
						// uni.setStorageSync('mineRefresh','true')
						this.getData()
						this.toast('支付成功')
				    },
				    fail: (err)=> {
						this.toast('支付失败')
				    }
				});
			},
			h5pay(params){
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": params.appId, //公众号名称，由商户传入     
						"timeStamp": params.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": params.nonceStr, //随机串     
						"package": params.package,
						"signType": params.signType, //微信签名方式：     
						"paySign": params.paySign //微信签名 
					},
					(res) => {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							uni.setStorageSync('mineRefresh','true')
							this.toast('支付成功')
							this.getData()
						} else {
							this.toast('支付失败')
						}
					});
			}

		}
	}
</script>

<style scoped lang="less">
	.center_body {
		padding: 10upx 50upx;
	}
	.account_balance {
		margin-top: 10upx;
		height: 250upx;
		border-radius: 15upx;
		box-shadow: 2upx 2upx 10upx 8upx #e2e2e2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.money {
			font-size: 30upx;
			color: #666;
			margin-bottom: 6upx;

			image {
				width: 45upx;
				height: 45upx;
				padding-bottom: 10upx;
				margin-right: 15upx;
				vertical-align: middle;
			}
		}

		.account_money {
			font-size: 48upx;
			font-weight: 700;
			color: #FF2842;
		}
	}

	.choose_item {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: space-between;
		margin-top: 40upx;
		font-size: 32upx;

		.remove {
			position: absolute;
			right: 12upx;
			top: 12upx;
			width: 40upx;
			height: 40upx;
			box-sizing: border-box;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.item {
			position: relative;
			width: 46%;
			height: 120upx;
			margin: 15upx 10upx;
			box-sizing: border-box;
			overflow: hidden;
			border: 2upx solid #d8d8d8;
			border-radius: 15upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.item_give {
				font-size: 28upx;
				color: #FF2842;
			}

			input {
				font-size: 30upx;
				text-align: center;
			}
			
		}
		.even_lastitem{
			width: 100%;
			height: 120upx;
			margin: 15upx 10upx;
			box-sizing: border-box;
			overflow: hidden;
			border: 2upx solid #d8d8d8;
			border-radius: 15upx;
			display: flex;
			align-items: center;
			justify-content: center;
			input {
				font-size: 30upx;
				text-align: center;
			}
		}

		.item_current {
			background: #FFF8F9;
			color: #FF2842;
			border: 2upx solid #FF2842;
		}

		.recommend {
			position: absolute;
			top: 3upx;
			left: -45upx;
			padding: 2upx 46upx;
			font-size: 20upx;
			color: #fff;
			background: #FF2842;
			transform: rotate(-45deg);
		}

	}

	.recharge_btn {
		width: 100%;
		height: 90upx;
		margin-top: 53upx;
		background: #FF2842;
		text-align: center;
		line-height: 90upx;
		color: #fff;
		font-size: 34upx;
		border-radius: 15upx;

	}

	.recharge_explain {
		margin-top: 60upx;
		font-size: 28upx;
		color: #999;

		.explain_title {
			font-size: 34upx;
			color: #000;
		}

		.explain_item {
			margin-top: 25upx;
			display: flex;
			flex-direction: column;
			padding-bottom: 15upx;

			text {
				margin-top: 15upx;
			}
		}
	}
	.load{
		image{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 100upx;
			height: 100upx;
		}
	}
</style>
